<template>
  <div class="login-default">
    <div class="login-title">
      <img class="login-logo" src="@/assets/login-logo.png" />
      <span>星云管理后台 </span>
    </div>

    <div class="login-container">
      <router-view></router-view>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({
  name: 'LoginView'
})
export default class extends Vue {
  mounted() {
    if (this.$route.query.token) {
      this.$router.replace({
        path: '/login/reset-pwd',
        query: this.$route.query
      })
    }
  }
}
</script>
<style lang="scss">
.login-default {
  height: 100%;
  position: relative;
  button {
    padding: 12px 20px !important;
  }
  input::-webkit-input-placeholder {
    color: #8a8a8f;
  }
  input:disabled::-webkit-input-placeholder {
    color: #8a8a8f;
  }
  input {
    &:-webkit-autofill,
    &:-webkit-autofill:hover,
    &:-webkit-autofill:focus,
    &:-webkit-autofill:active {
      transition-delay: 99999s;
      transition: color 99999s ease-out, background-color 99999s ease-out;
      -webkit-transition-delay: 99999s;
      -webkit-transition: color 99999s ease-out,
        background-color 99999s ease-out;
      -webkit-text-fill-color: $loginInput;
    }
  }

  .login-title {
    width: 100%;
    height: 50px;
    left: 0;
    background: $menuNewBg;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    font-size: 16px;
    .login-logo {
      position: relative;
      margin-right: 12px;
      margin-left: 30px;
      height: 20px;
      width: 30px;
      transform: translateY(-2px);
    }
  }
}
.login-container {
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .color-pr {
    color: #1890ff;
  }
  .el-col {
    margin-bottom: 10px;
  }
  .el-input {
    height: 40px;
    input {
      height: 100%;
    }
  }

  .title {
    display: flex;
    align-items: center;
    font-size: 32px;
    color: $loginColor;
    justify-content: center;
    text-align: center;
    font-weight: 500;
    color: #1890ff;
    margin-bottom: 56px;
    .title-icon {
      vertical-align: middle;
      margin-right: 10px;
    }
  }
  .show-pwd {
    position: absolute;
    right: 12px;
    top: 2px;
    font-size: 16px;
    color: $darkGray;
    cursor: pointer;
    user-select: none;
    .svg-icon {
      color: #0a2463;
    }
  }
  .login-bg {
    width: 404px;
    height: 560px;
    background: url(./../../assets/login-bg.png) center center no-repeat;
  }

  .svg-container {
    width: 36px;
    text-align: center;
    line-height: 40px;
    padding-right: 10px;
    vertical-align: middle;
    display: inline-block;
    .svg-icon {
      color: #0a2463;
    }
  }
  background-image: url(./../../assets/bg.png);
}
</style>
